import React, { useState } from 'react';
import {Form, Row, Col, Input, Button, Image, Divider, Table,Upload, message} from 'antd';
import { DownOutlined, UpOutlined } from '@ant-design/icons';
import icon_liu from "../../../picture/刘安平.png";
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import Card from "antd/es/card";
import Mentions from "antd/es/mentions";

export default function Information() {
  const [loading,setLoading] = React.useState(false);
  const [imageUrl,setImageUrl] = React.useState('');
  const data = {
    key: '1',
    name: '刘安平',
    sex:'女',
    age: 21,
    PersonId: '1234567891',
    school:'西南科技大学',
    status: '已缴费',
    icon:icon_liu,
  }

  // const { Option } = Mentions;
  //
  // function getOptions() {
  //   return ['afc163', 'zombiej', 'yesmeck'].map(value => (
  //       <Option key={value} value={value}>
  //         {value}
  //       </Option>
  //   ));
  // }

  function getBase64(img, callback) {
    const reader = new FileReader();
    reader.addEventListener('load', () => callback(reader.result));
    reader.readAsDataURL(img);
  }

  function beforeUpload(file) {
    const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
    if (!isJpgOrPng) {
      message.error('You can only upload JPG/PNG file!');
    }
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      message.error('Image must smaller than 2MB!');
    }
    return isJpgOrPng && isLt2M;
  }

  let handleChange;
  handleChange = info => {
    console.log(info)
    if (info.file.status === 'uploading') {
      setLoading(true);
      return;
    }
    if (info.file.status === 'error') {
      // Get this url from response in real world.
      getBase64(info.file.originFileObj, imageUrl =>
              setImageUrl(imageUrl),
        setLoading(false)
      );
    }
  };

  const uploadButton = (
      <div>
        {loading ? <LoadingOutlined /> : <PlusOutlined />}
        <div style={{ marginTop: 8 }}>Upload</div>
      </div>
  );


  return (
    <div>

      <Card title="用户基本信息" headStyle={{ fontSize: 30 }}>
        <div className="userInfo">
          <Row gutter={24}>
            <Col span={3}></Col>
            <Col span={8}>
              <Card className="cetCard2" title="用户信息" headStyle={{ fontSize: 20 }}>
                <div className="infoDiv">
                  <div className="infoDiv2">姓名：</div>
                  <Mentions className="infoDiv2" style={{ width: '50%' }} placeholder={data.name} >
                  </Mentions>
                </div>
                <div className="infoDiv">
                  <div className="infoDiv2">性别：</div>
                  <Mentions className="infoDiv2" style={{ width: '50%' }} placeholder={data.sex} >

                  </Mentions>
                </div>
                <div className="infoDiv">
                  <div className="infoDiv2">年龄：</div>
                  <Mentions className="infoDiv2" style={{ width: '50%' }} placeholder={data.age} >

                  </Mentions>
                </div>
                <div className="infoDiv">
                  <div className="infoDiv2">考号：</div>
                  <Mentions className="infoDiv2" style={{ width: '50%' }} placeholder={data.PersonId} readOnly>

                  </Mentions>
                </div>
                <div className="infoDiv">
                  <div className="infoDiv2">考点：</div>
                  <Mentions className="infoDiv2" style={{ width: '50%' }} placeholder={data.school} readOnly>

                  </Mentions>
                </div>
                <div className="infoDiv">
                  <div className="infoDiv2">状态：</div>
                  <Mentions className="infoDiv2" style={{ width: '50%' }} placeholder={data.status} readOnly>

                  </Mentions>
                </div>
              </Card>
            </Col>
            <Col span={2}></Col>
            <Col span={8}>
              <Card className="cetCard2" title="用户照片" headStyle={{ fontSize: 20 }}>
                {/*<div className="divIcon">*/}
                {/*  <Image src={data.icon} alt= "" style={{maxWidth:800, height:400}}/>*/}
                {/*</div>*/}

                <Upload
                    name="avatar"
                    listType="picture-card"
                    className="avatar-uploader"
                    showUploadList={false}
                    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                    beforeUpload={beforeUpload}
                    onChange={handleChange}
                >
                  {imageUrl ? <img className="imgStyle" src={imageUrl} alt="avatar" style={{ width:400, height:300}} /> : uploadButton}
                </Upload>
              </Card>
            </Col>
            <Col span={3}></Col>
          </Row>
        </div>
      </Card>
    </div>

  );
};

export { Information }